<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>图书信息</title>
<link rel="stylesheet" href="${basePath}/css/index.css">
<style>
*, body, ul, li, h1, h2 {
	margin: 0;
	padding: 0;
	list-style: none;
}

body {
	font: 15px "宋体";
	padding-top: 20px;
	background: url(../bg.png) no-repeat;
	background-size: cover;
	background-origin: border-box;
	background-clip: bordr-box;
}

#menu {
	width: 460px;
	float: left;
	margin-top: 40px;
}

.span9 {
	float: left;
	width: 65%;
	height: 765px;
}

#menu h1 {
	cursor: pointer;
	color: #000;
	font-size: 17px;
	padding: 5px 0 3px 10px;
	border: #C60 1px solid;
	margin-top: 1px;
	background-color: #f7ffff;
}

#menu h2 {
	cursor: pointer;
	color: #777;
	font-size: 14px;
	padding: 5px 0 3px 10px;
	border: #E7E7E7 1px solid;
	border-top-color: #FFF;
	background-color: #f0ffff;
}

#menu ul {
	padding-left: 15px;
	height: 100px;
	border: #E7E7E7 1px solid;
	border-top: none;
	overflow: auto;
}

#menu ul li {
	padding: 5px 0 3px 10px;
}

.no {
	display: none;
}
</style>
<script src="../js/jquery-1.11.1.js"></script>
<script src="../js/bootstrap-treeview.js"></script>
<script language="JavaScript">
	function ShowMenu(obj, noid) {
		var block = document.getElementById(noid);
		var n = noid.substr(noid.length - 1);
		var h2 = document.getElementById(noid.substring(0, 3))
				.getElementsByTagName("h2");
		if (noid.length == 8) {
			var ul = document.getElementById(noid.substring(0, 3))
					.getElementsByTagName("ul");
			var h2 = document.getElementById(noid.substring(0, 3))
					.getElementsByTagName("h2");
			for (var i = 0; i < h2.length; i++) {
				h2[i].innerHTML = h2[i].innerHTML.replace("+", "-");
				h2[i].style.color = "";
			}
			obj.style.color = "#FF0000";
			for (var i = 0; i < ul.length; i++) {
				if (i != n) {
					ul[i].className = "no";
				}
			}
		} else {
			var span = document.getElementById("menu").getElementsByTagName(
					"span");
			var h1 = document.getElementById("menu").getElementsByTagName("h1");
			for (var i = 0; i < h1.length; i++) {
				h1[i].innerHTML = h1[i].innerHTML.replace("+", "-");
				h1[i].style.color = "";
			}
			obj.style.color = "#0000FF";
			for (var i = 0; i < span.length; i++) {
				if (i != n) {
					span[i].className = "no";
				}
			}
		}
		if (block.className == "no") {
			block.className = "";
			obj.innerHTML = obj.innerHTML.replace("-", "+");

			for (var i = 0; i < h2.length; i++) {
				h2[i].style.color = "";
			}
		} else {
			block.className = "no";
			obj.style.color = "";
		}
	}
</script>
</head>
<body>
	<%@include file="header.jsp"%>
	<div>

		<div id="menu">
			<c:forEach var="category" items="${sets}" varStatus="level1">
				<h1 onClick="javascript:ShowMenu(this,'${level1.index+100}')">
					<a
						href="${basePath}book/Book_getBookLevel1.action?cate1=${category.id}"
						target="mainContent1">-&nbsp${category.code} ${category.name}</a>
				</h1>
				<span id="${level1.index+100}" class="no"> <c:forEach
						var="category1" items="${category.set}" varStatus="level2">
						<h2
							onClick="javascript:ShowMenu(this,'${level1.index*1000+level2.index*100000+10000000}')">
							<a
								href="${basePath}book/Book_getBookLevel2.action?cate2=${category1.id}"
								target="mainContent1">-&nbsp${category1.code}${category1.name}</a>
						</h2>
						<ul id="${level1.index*1000+level2.index*100000+10000000}"
							class="no">
							<c:forEach var="category2" items="${category1.set}"
								varStatus="status2">
								<li><a
									href="${basePath}book/Book_getBookLevel3.action?cate3=${category2.id}"
									target="mainContent1">${category2.code}${category2.name}</a></li>
							</c:forEach>
						</ul>
					</c:forEach>
				</span>
			</c:forEach>
		</div>

		<div class="span9">
			<iframe id="mainContent" name="mainContent1" width="100%"
				height="100%" frameborder="0" scrolling="auto"></iframe>
		</div>
	</div>
</body>
</html>
